<template>
  <div>
    <div class="box">🔔{{ billboard.content }}</div>
    <div class="columns">
      <!-- 这个帖子列占3/4 -->
      <div class="column is-three-quarters">
        <!-- 第三步：使用组件 -->
        <TopicList></TopicList>
      </div>
      <div class="column">
        <CardBar></CardBar>
      </div>
    </div>
  </div>
</template>

<script>
//第一：导入接口
import { getBillboard } from "@/api/doubaoApi";
// 第一步：导入组件
import CardBar from "@/views/homeRight/CardBar";
import PostList from "@/views/homeLeft/Index";

export default {
  name: "Home",
  //第二步：声明组件(TopicList:PostList相当于给起了个别名)
  components: {CardBar,TopicList:PostList},
  data() {
    return {
      //billboard是一个对象，取里面属性content
      billboard: {
        content: "",
      },
    };
  },
  //第二：页面创建完成时调用的方法
  created() {
    this.fetchBillboard();
  },
  methods: {
    async fetchBillboard() {
      //第三：方法中调用接口，接受传回来的json对象
      getBillboard().then((value) => {
        const { data } = value;
        this.billboard = data;
      });
    },
  },
};
</script>